<template>
  <header class="header">
    <h1>todos</h1>
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      v-model="Allbtn"
    />
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="uname"
      @keydown.enter="ent"
    />
  </header>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {
      uname: '',
    }
  },
  methods: {
    ent() {
      // this.list.push({
      //   id: this.list.at(-1).id + 1,
      //   name: this.uname,
      //   isDone: false,
      // })
      if (this.uname.trim() === '') return alert('内容不能为空')
      this.$emit('lists', this.uname)
      this.uname = ''
    },
  },
  computed: {
    // 全选，单选
    Allbtn: {
      get() {
        return this.list.every((item) => item.isDone)
      },
      set(val) {
        return this.list.forEach((item) => !(item.isDone = val))
      },
    },
  },
}
</script>
